

import React, { useState } from 'react';
import { View, Text, ScrollView, TouchableOpacity, Image, RefreshControl, } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useRouter } from 'expo-router';
import { FontAwesome6 } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import styles from './styles';

interface ApprovalItem {
  id: string;
  title: string;
  applicant: string;
  date: string;
  time: string;
  status: 'pending' | 'approved' | 'in-progress';
  statusText: string;
  category: string;
  processInstanceId: string;
}

const HomeScreen: React.FC = () => {
  const router = useRouter();
  const [isRefreshing, setIsRefreshing] = useState(false);

  const [approvalItems] = useState<ApprovalItem[]>([
    {
      id: '1',
      title: '员工请假申请',
      applicant: '李小红',
      date: '2024-01-15',
      time: '14:30',
      status: 'pending',
      statusText: '待审批',
      category: '人事审批',
      processInstanceId: 'PROC-001',
    },
    {
      id: '2',
      title: '采购申请单',
      applicant: '王强',
      date: '2024-01-15',
      time: '10:15',
      status: 'approved',
      statusText: '已通过',
      category: '财务审批',
      processInstanceId: 'PROC-002',
    },
    {
      id: '3',
      title: '项目预算申请',
      applicant: '陈思',
      date: '2024-01-14',
      time: '16:45',
      status: 'in-progress',
      statusText: '审批中',
      category: '管理层审批',
      processInstanceId: 'PROC-003',
    },
  ]);

  const handleRefresh = async () => {
    setIsRefreshing(true);
    try {
      // 模拟刷新数据
      await new Promise(resolve => setTimeout(resolve, 1000));
    } finally {
      setIsRefreshing(false);
    }
  };

  const handlePendingReminderPress = () => {
    router.push('/p-pending_approval');
  };

  const handleQuickActionPress = (action: string) => {
    switch (action) {
      case 'pending':
        router.push('/p-pending_approval');
        break;
      case 'approved':
        router.push('/p-approved_by_me');
        break;
      case 'initiated':
        router.push('/p-my_initiated');
        break;
      case 'cc':
        router.push('/p-cc_to_me');
        break;
    }
  };

  const handleApprovalItemPress = (processInstanceId: string) => {
    router.push(`/p-approval_detail?processInstanceId=${processInstanceId}`);
  };

  const handleViewAllPress = () => {
    router.push('/p-pending_approval');
  };

  const handleNotificationPress = () => {
    // 通知功能暂未定义具体页面
    console.log('打开通知中心');
  };

  const handleStatisticsPress = () => {
    router.push('/p-data_statistics');
  };

  const handleTemplatesPress = () => {
    // 审批模板功能暂未定义具体页面
    console.log('打开审批模板页面');
  };

  const getStatusBadgeStyle = (status: string) => {
    switch (status) {
      case 'pending':
        return styles.statusBadgePending;
      case 'approved':
        return styles.statusBadgeApproved;
      case 'in-progress':
        return styles.statusBadgeInProgress;
      default:
        return styles.statusBadgePending;
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView
        style={styles.scrollView}
        showsVerticalScrollIndicator={false}
        refreshControl={
          <RefreshControl refreshing={isRefreshing} onRefresh={handleRefresh} />
        }
      >
        {/* 顶部用户信息区域 */}
        <LinearGradient
          colors={['#969FFF', '#5147FF', '#3E3987']}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 1 }}
          style={styles.userHeader}
        >
          <View style={styles.userInfo}>
            <View style={styles.userDetails}>
              <Image
                source={{
                  uri: 'https://s.coze.cn/image/F2BsQpSH8I4/',
                }}
                style={styles.userAvatar}
              />
              <View>
                <Text style={styles.userName}>张明</Text>
                <Text style={styles.userDepartment}>技术部 · 总监</Text>
              </View>
            </View>
            <TouchableOpacity
              style={styles.notificationIcon}
              onPress={handleNotificationPress}
            >
              <FontAwesome6 name="bell" size={20} color="#FFFFFF" />
              <View style={styles.notificationBadge}>
                <Text style={styles.notificationBadgeText}>3</Text>
              </View>
            </TouchableOpacity>
          </View>

          {/* 待办提醒 */}
          <TouchableOpacity
            style={styles.pendingReminder}
            onPress={handlePendingReminderPress}
          >
            <View style={styles.pendingReminderContent}>
              <View>
                <Text style={styles.pendingReminderLabel}>待我审批</Text>
                <Text style={styles.pendingCount}>12</Text>
              </View>
              <View style={styles.pendingReminderRight}>
                <Text style={styles.pendingChange}>较昨日 +3</Text>
                <FontAwesome6
                  name="arrow-right"
                  size={14}
                  color="rgba(255, 255, 255, 0.6)"
                  style={styles.pendingArrow}
                />
              </View>
            </View>
          </TouchableOpacity>
        </LinearGradient>

        {/* 快捷操作区域 */}
        <View style={styles.quickActionsSection}>
          <Text style={styles.sectionTitle}>快捷操作</Text>
          <View style={styles.quickActionsGrid}>
            <TouchableOpacity
              style={styles.quickActionCard}
              onPress={() => handleQuickActionPress('pending')}
            >
              <LinearGradient
                colors={['#969FFF', '#5147FF']}
                style={styles.quickActionIcon}
              >
                <FontAwesome6 name="clock" size={18} color="#FFFFFF" />
              </LinearGradient>
              <Text style={styles.quickActionText}>待我审批</Text>
            </TouchableOpacity>

            <TouchableOpacity
              style={styles.quickActionCard}
              onPress={() => handleQuickActionPress('approved')}
            >
              <LinearGradient
                colors={['#4ADE80', '#22C55E']}
                style={styles.quickActionIcon}
              >
                <FontAwesome6 name="check" size={18} color="#FFFFFF" />
              </LinearGradient>
              <Text style={styles.quickActionText}>我已审批</Text>
            </TouchableOpacity>

            <TouchableOpacity
              style={styles.quickActionCard}
              onPress={() => handleQuickActionPress('initiated')}
            >
              <LinearGradient
                colors={['#60A5FA', '#3B82F6']}
                style={styles.quickActionIcon}
              >
                <FontAwesome6 name="plus" size={18} color="#FFFFFF" />
              </LinearGradient>
              <Text style={styles.quickActionText}>我发起的</Text>
            </TouchableOpacity>

            <TouchableOpacity
              style={styles.quickActionCard}
              onPress={() => handleQuickActionPress('cc')}
            >
              <LinearGradient
                colors={['#A78BFA', '#8B5CF6']}
                style={styles.quickActionIcon}
              >
                <FontAwesome6 name="share" size={18} color="#FFFFFF" />
              </LinearGradient>
              <Text style={styles.quickActionText}>抄送我的</Text>
            </TouchableOpacity>
          </View>
        </View>

        {/* 数据概览 */}
        <View style={styles.dataOverviewSection}>
          <Text style={styles.sectionTitle}>今日概览</Text>
          <View style={styles.dataOverviewGrid}>
            <View style={styles.statsCard}>
              <LinearGradient
                colors={['#969FFF', '#5147FF']}
                style={styles.statsCardGradient}
              >
                <Text style={styles.statsValue}>8</Text>
                <Text style={styles.statsLabel}>已处理</Text>
              </LinearGradient>
            </View>

            <View style={styles.statsCard}>
              <LinearGradient
                colors={['rgba(150, 159, 255, 0.1)', 'rgba(81, 71, 255, 0.1)']}
                style={styles.statsCardGradient}
              >
                <Text style={[styles.statsValue, styles.statsValueOrange]}>12</Text>
                <Text style={styles.statsLabel}>待处理</Text>
              </LinearGradient>
            </View>

            <View style={styles.statsCard}>
              <LinearGradient
                colors={['rgba(150, 159, 255, 0.1)', 'rgba(81, 71, 255, 0.1)']}
                style={styles.statsCardGradient}
              >
                <Text style={[styles.statsValue, styles.statsValueGreen]}>2.3h</Text>
                <Text style={styles.statsLabel}>平均时长</Text>
              </LinearGradient>
            </View>
          </View>
        </View>

        {/* 最近审批事项 */}
        <View style={styles.recentApprovalsSection}>
          <View style={styles.sectionHeader}>
            <Text style={styles.sectionTitle}>最近审批</Text>
            <TouchableOpacity onPress={handleViewAllPress}>
              <Text style={styles.viewAllButton}>查看全部</Text>
            </TouchableOpacity>
          </View>
          <View style={styles.approvalsList}>
            {approvalItems.map((item) => (
              <TouchableOpacity
                key={item.id}
                style={styles.approvalItem}
                onPress={() => handleApprovalItemPress(item.processInstanceId)}
              >
                <View style={styles.approvalContent}>
                  <Text style={styles.approvalTitle}>{item.title}</Text>
                  <Text style={styles.approvalMeta}>
                    申请人：{item.applicant} | {item.date} {item.time}
                  </Text>
                  <View style={styles.approvalTags}>
                    <View style={getStatusBadgeStyle(item.status)}>
                      <Text style={styles.statusBadgeText}>{item.statusText}</Text>
                    </View>
                    <Text style={styles.approvalCategory}>{item.category}</Text>
                  </View>
                </View>
                <FontAwesome6
                  name="chevron-right"
                  size={14}
                  color="#6B7280"
                />
              </TouchableOpacity>
            ))}
          </View>
        </View>

        {/* 更多功能 */}
        <View style={styles.moreFunctionsSection}>
          <Text style={styles.sectionTitle}>更多功能</Text>
          <View style={styles.moreFunctionsGrid}>
            <TouchableOpacity
              style={styles.functionCard}
              onPress={handleStatisticsPress}
            >
              <LinearGradient
                colors={['#969FFF', '#5147FF']}
                style={styles.functionIcon}
              >
                <FontAwesome6 name="chart-bar" size={16} color="#FFFFFF" />
              </LinearGradient>
              <View style={styles.functionContent}>
                <Text style={styles.functionTitle}>数据统计</Text>
                <Text style={styles.functionSubtitle}>查看审批数据</Text>
              </View>
            </TouchableOpacity>

            <TouchableOpacity
              style={styles.functionCard}
              onPress={handleTemplatesPress}
            >
              <LinearGradient
                colors={['#F472B6', '#EC4899']}
                style={styles.functionIcon}
              >
                <FontAwesome6 name="file-lines" size={16} color="#FFFFFF" />
              </LinearGradient>
              <View style={styles.functionContent}>
                <Text style={styles.functionTitle}>审批模板</Text>
                <Text style={styles.functionSubtitle}>常用模板库</Text>
              </View>
            </TouchableOpacity>
          </View>
        </View>

        {/* 底部安全区域 */}
        <View style={styles.bottomSafeArea} />
      </ScrollView>
    </SafeAreaView>
  );
};

export default HomeScreen;

